<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>选择可选的时间</title>
<link rel="stylesheet" type="text/css" href="/Content/style/jscal2.css" ></link>
<link rel="stylesheet" type="text/css" href="/Content/style/border-radius.css" ></link>
<script type="text/javascript" src="/Content/scripts/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/Content/scripts/jscal2.js"></script>
<script type="text/javascript" src="/Content/scripts/cn.js"></script>
<style type="text/css">
#choosedTime{
	vertical-align: top;
	padding-left: 20px;	
}
.option{
	cursor:pointer;
	padding:2px;
}
#submitBtn{
	text-align: center;
}
</style>

<script type="text/javascript">
var id = <?php echo $activity["Id"]?>;
var hash = '<?php echo $hash?>';
function deleteOption(obj)
{
	$(obj).remove();
}

function submit_options()
{
	var options = new Array();
	var obj = $(".option");
	obj.each(
		function()
		{
			options.push(this.title);
		}
	);
	
	$.post("/lib/ajax/submitOptions.php",{id:id,options:options,hash:hash},
		function(dd){
			if(dd=='ok')
			{
				self.location = "vote.php?action=result&id="+hash;
			}
		}
			);
}
</script>
</head>
<body>
	
<div id="content" align="center">
<table>
	<tr>
    	<td>
    		<div>
    			<h2><span>选择日期 </span></h2>
    		</div>
		</td>
	</tr>
	<tr>
		<td>
		
          <div id="calendar-container"></div>
          
		</td>
		<td id="choosedTime">
    		<div >
                <h3><span>选择的日期:</span></h3>
                <div id="calendar-info"></div>
		    </div>
		</td>
	</tr>
	<tr>
		<td id="submitBtn">
			<button onclick="submit_options()">提交</button>
		</td>
	</tr>
</table>
</div>

<script type="text/javascript">//<![CDATA[
var DATE_INFO = {
		20090507: { klass: "highlight", tooltip: "%Y/%m/%d (%A)<br />That was yesterday" },
		20090508: { klass: "highlight", tooltip: "And this is TODAY" }
		}; 
function getDateInfo(date, wantsClassName) {
	var as_number = Calendar.dateToInt(date);
	if (as_number >= 20090518 && as_number <= 20090524)
	return {
        klass : "highlight2",
        tooltip : "<div style='text-align: center'>This is the green week</div>"
    };
    return DATE_INFO[as_number];
};

Calendar.setup({
    cont          : "calendar-container",
    selectionType : Calendar.SEL_MULTIPLE,
    selection     : Calendar.dateToInt(new Date()),
    fdow 		  : 1,
    titleFormat	  : "%Y %b",
    onSelect      : function() {
    	var date = Calendar.intToDate(this.selection.get()); 
    	var dateStr = Calendar.printDate(date, "%Y-%m-%d");
        $("#calendar-info").append($("<div class='option'  title="+dateStr+" onclick='deleteOption(this)' >").append(Calendar.printDate(date, "<span>%B%d日 星期%a </span><img class='delete_ico' src='/Content/images/iDelete.gif'/>")));
    }
});
//]]></script>
</body>
</html>
